<template>
    <div class="album-list-box">
        <div class="album-header">
            <div class="album-hot" :class="sortId === 1?'active':''" @click="changeSortId(1)"
                 @mousedown="tagMousedown('album-hot')"
                 @mouseup="tagMouseup('album-hot')"
                 @mouseleave="tagMouseleave('album-hot')"
            >
                最热
            </div>
            <div class="album-new" :class="sortId === 0?'active':''" @click="changeSortId(0)"
                 @mousedown="tagMousedown('album-new')"
                 @mouseup="tagMouseup('album-new')"
                 @mouseleave="tagMouseleave('album-new')"
            >
                最新
            </div>
        </div>
        <m-album-list class="album-list" :albums="singerAlbums" v-if="isShow"/>
        <loading v-if="!isShow"/>
    </div>
</template>

<script>
  import MAlbumList from '../../../../../../components/m-album-list/m-album-list'
  import Loading from '../../../../../../components/loading/loading'
  import { getSingerAlbumsData } from '../../../../../../common/js/requestData'
  import { getSign } from '../../../../../../common/js/sign'
  import { getSingerAlbums } from '../../../../../../api/singer'
  import { ERR_OK } from '../../../../../../api/config'
  import { createReqData } from '../../../../../../common/js/createReqData'

  export default {
    name: 'albums',
    components: { Loading, MAlbumList },
    props: {
      singerMid: {
        type: String
      }
    },
    data () {
      return {
        sortId: 0,
        isShow: false,
        singerAlbums: []
      }
    },
    created () {
      this.initAlbums()
    },
    methods: {
      initAlbums () {
        this.isShow = false
        let singerAlbumsData = getSingerAlbumsData(this.singerMid, 0, this.sortId, 50)
        let singerAlbumsSign = getSign(singerAlbumsData)
        let reqData = createReqData(singerAlbumsSign, singerAlbumsData)
        getSingerAlbums(reqData).then(res => {
          if (res.code === ERR_OK) {
            this.singerAlbums = res.data.albums
          }
          this.isShow = true
        })
      },
      changeSortId: function (id) {
        if (this.sortId === id) {
          return
        }
        this.sortId = id
        this.initAlbums()
      },
      // 鼠标点击标签时样式改变
      tagMousedown (className) {
        let dom = document.getElementsByClassName(className)[0]
        dom.style.transform = 'translate3d(2px,2px,0)'
      },
      tagMouseup (className) {
        let dom = document.getElementsByClassName(className)[0]
        dom.style.transform = 'translate3d(0,0,0)'
      },
      tagMouseleave (className) {
        let dom = document.getElementsByClassName(className)[0]
        dom.style.transform = 'translate3d(0,0,0)'
      }
    }
  }
</script>

<style lang="less">
    .album-list-box {
        width: 100%;

        .album-header {
            margin-top: 10px;
            height: 60px;
            line-height: 60px;
            font-size: 12px;
            color: var(--font-tow-color);
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .album-hot {
                margin-right: 10px;
            }

            .album-hot:hover {
                cursor: pointer;
                color: var(--font-active-color);
            }

            .album-new:hover {
                cursor: pointer;
                color: var(--font-active-color);
            }

            .active {
                color: var(--font-active-color);
            }
        }

        .album-list {
            margin-top: 10px;
        }
    }
</style>
